<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Select your class!</title>
    <link rel="stylesheet" th:href="@{/styles.css}" />
    <style>
        html{
            width: 100%;
            height: 100%;
            font-style: sans-serif;
        }
        body{
            width: 100%;
            height: 100%;
            font-family: 'Open Sans',sans-serif;
            margin: 0;
            background-color: #dfdfdf;
        }
        .ingredient-group{
            position: absolute;
            top:50%;
            left:50%;
            margin: -300px 0 0 -400px;
            width: 800px;
            height: 600px;
            background-color: white;
            border-radius: 10px;
            box-shadow: #56536A ;
            border-radius: 10px;
        }
        .Re{
            color: #b09f7a;
            text-shadow:0 0 10px;
            letter-spacing: 1px;
            text-align: center;
            position: absolute;
            top: 9%;
            left: 50%;
            width: 500px;
            margin-left: -250px;
        }
        .in{
            width: 500px;
            height: 320px;
            position: absolute;
            top: 48%;
            left: 50%;
            margin-top: -120px;
            margin-left: -250px;
        }
        .la{
            color: #959695;
            font-size: 20px;
            width: 15px;
            margin-top: 10px;
        }
        .lb{
            width: 18px;
            height: 18px;
        }
        .lc{

            width: 300px;
            height: auto;
            margin-left: 130px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .but{
            width: 100px;
            text-align: center;
            line-height: 1px;
            background-color: #fbfbfb;
            border: 1px solid #312E3D;
            color: #656464;
            padding: 9px 14px;
            font-size: 16px;
            box-shadow: #656464;
            line-height: normal;
            border-radius: 15px;
            margin: 0;
        }
        .bu{
            position: absolute;
            bottom: 10%;
            left:50%;
            width: 100px;
            height: 30px;
            margin-left: -50px;
        }
        .lo{
            width: 210px;
            height: 25px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .ls{
            border: none;
            background-color:  #dfdfdf;
            position: absolute;
            right: 0;
            top: 5px;
        }
        .ll{
            color: darkred;
            margin-top:4px ;
        }
    </style>
</head>

<body>
<form method="POST" th:object="${taco}">

    <span class="validationError"
          th:if="${#fields.hasErrors('ingredients')}"
          th:errors="*{ingredients}">Ingredient Error</span>

    <div class="ingredient-group" id="subject">
        <h1 class="Re">Select Professional Courses</h1>
        <div class="in">
        <div th:each="ingredient : ${subject}" class="lc">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}" class="lb"/>
            <span th:text="${ingredient.name}" class="la">INGREDIENT</span><br/>
        </div>

        </div>
        <div class="bu">
            <button class="but" >Submit</button>
        </div>
    </div>






</form>

<form method="POST" th:action="@{/logout}" id="logoutForm">
    <div class="lo">
        <label class="ll">Wellcome</label>
        <label th:if="${!user.fullname.isEmpty()}" th:text="${user.fullname}" class="ll"/>
        <input type="submit" value="Logout" class="ls"/>
    </div>
</form>
</body>
</html>


